<template>



  <header :class="{active: shoNav}">
    <div class="topbar">
      <router-link class="logo" to="/index" @click.native="shoNavClose, $router.go(0)">
        HUIYUAN
      </router-link>
      <div class="logo-more">
        <span>...</span>
      </div>
    </div>
    <div class="menu" @click="shoNavOpen">
      <img src="~@/assets/img/nav.png" alt="">
    </div>
    <div class="header-shadow" @click="shoNavClose"></div>
    <div class="navs">
      <div class="close" @click="shoNavClose">
        <img src="~@/assets/img/close.png" alt="">
      </div>
      <div class="navs-wrap">

        <router-link class="logo" to="/index">
          <img src="~@/assets/img/logo.png" alt="">
        </router-link>
        <div class="item-wrap">
          <div class="item-parent" v-for="(item, index) in navs" :key="index">
            <div :class="['item', {active: index === twoHierarchy}]" 
              :key="index" @click="twoHierarchyControl(index)">{{item['stair']['title']}}</div>
            <div class="second-parent" v-if='index === twoHierarchy'>
              <router-link class="second-item" @click.native="shoNavClose" v-for="(second, index2) in item.second"
                :to="{ path: second['path']}" :key="index2">{{second['title']}}</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>






</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    name: "commonHeader",
    components: {
   
    },
  })
export default class commonHeader extends Vue {
  @Prop() private msg!: string;


  navs = [
          {
            stair: { title: "你好惠元" },
            second: [
              { title: "你好惠元", path: "/hello/hello" },
              { title: "董事寄语", path: "/hello/manager" },
              { title: "慈善公益", path: "/hello/charity" },
              { title: "新闻中心", path: "/hello/news" },
            ]
          },
          {
            stair: { title: "实力惠元" },
            second: [
              { title: "医学中心", path: "/strength/medicine" },
              { title: "项目体系", path: "/strength/project" },
              { title: "名医臻享", path: "/strength/doctors" },
              { title: "幸福设计", path: "/strength/design" },
              { title: "五心服务", path: "/strength/serve" },
            ]
          },
          {
            stair: { title: "幸福惠元" },
            second: [
              { title: "幸福博物馆", path: "/happiness" },
              { title: "幸福留影机", path: "/happiness" },
            ]
          },
          {
            stair: { title: "梦想惠元" },
            second: [
              { title: "合作交流", path: "/dream" },
              { title: "人才招募", path: "/dream" },
              { title: "关注惠元", path: "/dream" },
            ]
          },
          {
            stair: { title: "全景惠元" },
            second: [
              { title: "VR全景", path: "/panorama" },
            ]
          }
        ];
        // 控制二级导航显示与隐藏
        twoHierarchy = -1;
        // 控制导航显示与隐藏
        shoNav = false;

              //开关二级导航
      twoHierarchyControl(index: number) {
        if (this.twoHierarchy == index) {
          this.twoHierarchy = -1
        } else {
          this.twoHierarchy = index
        }
      }

      shoNavOpen() {
        this.shoNav = true;
      }

      shoNavClose() {
        this.shoNav = false;
      }


}
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/common.scss';
</style>
